<template>
  <a-modal
    title="从标准WBS模板导入"
    :visible="templateVisible"
    ok-text="确定导入"
    width="80%"
    :maskClosable="false"
    :destroyOnClose="true"
    :confirm-loading="confirmLoading"
    cancel-text="取 消"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div style="padding: 20px">
      <a-form :form="form">
        <a-form-item label="WBS模板">
          <a-select
            show-search
            :filter-option="templateFilterOption"
            style="width: 200px"
            @change="onTemplateChange"
            placeholder="选择标准WBS模板"
            v-decorator="['template', { rules: [{ required: false, message: '请选择标准WBS模板' }] }]"
          >
            <a-select-option v-for="t in templates" :key="t.id" :value='t.id'>{{t.text}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="开工日期">
          <a-date-picker
            @change="onStartDateChange"
            v-decorator="['startDate', { rules: [{ required: false, message: '请选择项目开工日期' }] }]"
            placeholder="选择项目开工日期" style="width: 100%"/>
        </a-form-item>
      </a-form>
    </div>
    <a-table row-key="id" :scroll="{ x: 1500, y: 400 }"
             :columns="columns"
             :defaultExpandAllRows="true"
             :pagination="false"
             :expandIconColumnIndex="2"
             :data-source="tableData"
             :row-selection="rowSelection"/>

  </a-modal>
</template>
<style scoped>
  /deep/ .ant-modal-body {
    padding: 0;
  }
</style>
<script>
import { getWbsTemplate } from '@/api/construction'
  const data = [
    {
      id: 1,
      name: '施工准备阶段',
      duration: 50,
      type: 'project',
      levelType:1,
      startDate: '2018-12-01',
      children: [
        {
          id: 11,
          name: '施工准备',
          duration: 15,
          parent: 1,
          parentNames:'施工准备阶段',
          type: 'subproject',
          startDate: '2018-12-01',
        levelType:2,
          children: [{
            id: 12,
            name:'施工准备',
            matters: '工程中标',
            duration: 1,
            level: 1,
            completeStandard: '建设单位发放中标通知书或进场邀请函',
            responsible: '二级单位市场部经理',
            verifyDoc: '中标通知书扫描件',
            parent: 11,
            firstResponsible: '第一责任人',
            firstResCode:'1',
            resCode:'1',
            levelType:3,
            parentNames:'施工准备{|}施工准备阶段',
            type: 'task',
            startDate: '2018-12-01',
            endDate:'2018-12-24'
          }, {
            id: 13,
            name:'施工准备',
            matters: '项目管理架构建立',
            duration: 15,
            level: 2,
            levelType:3,
            firstResponsible: '第一责任人',
            firstResCode:'1',
            resCode:'1',
            completeStandard: '项目部班子组建完毕，项目主要管理成员到场（主要管理人员应包括项目经理、生产经理、项目总工、招采经理、安全总监）',
            responsible: '二级单位人力资源部经理',
            verifyDoc: '项目部组织机构图及人员合影',
            parent: 11,
            parentNames:'施工准备{|}施工准备阶段',
            type: 'task',
            startDate: '2019-01-01',
            endDate:'2018-12-24'
          }, {
            id: 14,
            name:'施工准备',
            matters: '项目管理策划编制',
            duration: 5,
            level: 3,
            levelType:3,
            completeStandard: '按照局标准化手册完成项目管理策划编制（总体施工部署、机械设备配置、关键节点、关键工艺等）',
            firstResponsible: '第一责任人',
            firstResCode:'1',
            resCode:'1',
            responsible: '直接责任人',
            verifyDoc: '项目管理策划书审批表扫描件',
            parent: 11,
            parentNames:'施工准备{|}施工准备阶段',
            type: 'task',
            startDate: '2019-02-01',
            endDate:'2018-12-24'
          }]
        }
      ]
    }, {
      id: 15,
      name: '工程',
      duration: 25,
      levelType:1,
      type: 'project',
      children: [
        {
          id: 16,
          matters: '地下四大块',
          name:'工程',
          duration: 20,
          type: 'task',
            levelType:2,
          parent: 15,
          parentNames:'工程',
          startDate: '2019-03-01',
          endDate:''
        },
        {
          id: 17,
          matters: '地下结构',
          name:'工程',
          duration: 25,
            levelType:2,
          type: 'task',
          parentNames:'工程',
          parent: 15,
          startDate: '2019-04-01',
          endDate:''
        }
      ]
    }
  ]

//   const tasksss = {
//   data:[
//      {id:"p_1", text:"Project #1", start_date:"01-04-2013", duration:18, 
//      open:true},
//      {id:"t_1", text:"Task #1", start_date:"02-04-2013", duration:8,
//      parent:"p_1"},
//      {id:"t_2", text:"Task #2", start_date:"11-04-2013", duration:8,
//      parent:"p_1"}
//    ]
// };
  const templates = [{ id: 1, text: '机场计划管控模块' }, { id: 2, text: '体育馆计划管控模块' }, { id: 3, text: '万达商业体计划管控模块' }]
  export default {
    name: 'TaskTemplateModal',
    props: {
      visible: {
        type: Boolean,
        default() {
          return false
        }
      },
      selectLevel:{
        type:[String,Number],
      }
    },
    watch: {
      visible: {
        handler(nv) {
          this.templateVisible = nv
          if (nv) {
            this.columns = this.getColumns()
            this.confirmLoading = false
          }
        },
        immediate: true
      },
      selectLevel:{
        handler(value){
          console.log(value)
        },
        immediate: true
      }
    },
    data() {
      return {
        templates,
        selectTemplateLevel:'',
        plugins: {
          multiselect: true,
          drag_timeline: true
        },
        confirmLoading:false,
        templateVisible: false,
        rowIndex: 1,
        // tableData:[],
        tableData:data,
        columns: [],
        data:[],
        selectedData: [],
        rowSelection: {},
        form: this.$form.createForm(this, {}),
        selectedTemplate: null,
        selectedStartDate: null,
        selectedKeys:[]
      }
    },
    created() {
      this.rowSelection = this.getRowSelection()
      this.selectTemplate()
      console.log(this.rowSelection)
    },
    methods: {
    //   getWbsTemplate(){
    //     getWbsTemplate().then((res)=>{
    //       // this.tableData = res
    //     })
    //   },
        selectTemplate(){
            console.log(this.tableData)
            console.log(this.selectLevel)
            // this.tableData.forEach((item)=>{
            //     let result = []
            //     console.log(item)
            //     if(item.children){
            //         item.children.forEach((item1)=>{
            //             console.log(item1)
            //             if(item1.children){
            //                 console.log(item1.children)
            //                 result.push({       
            //                     id: item1.id,
            //                     name: item1.name,
            //                     duration: item1.duration,
            //                     type: item1.type,
            //                     levelType:item1.levelType,
            //                     children:item1.children
            //                 })
            //                 item1.children.forEach((item2)=>{
            //                     console.log(result)
            //                     // result.push(item2)
            //                     console.log(item2)
            //                     if(item2.children){
            //                         item2.children.forEach((item3)=>{
            //                             console.log(item3)
            //                             // result.push(item3)
            //                         })
            //                     }
            //                 })
            //             }
            //         })
            //     }
            //     console.log(result)
            // })
        },
      getRowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            this.columns = this.getColumns()
            this.selectedData = selectedRows
          },
          onSelect: (record, selected, selectedRows) => {
            this.columns = this.getColumns()

            // if(this.selectedRows.parent===undefined){

            // }
            this.selectedData = selectedRows
                // console.log(record)
                // console.log(selected)
                console.log(selectedRows)
                // this.selectTemplateLevel = selectedRows[0].levelType
                console.log(this.selectTemplateLevel)
                  // this.selectedData.forEach((item)=>{
                  //   // this.$set(item,"selectTemplateLevel",this.selectTemplateLevel)
                  //   item.push(this.selectTemplateLevel)
                  //   console.log(this.selectedData)
                  // })
                // }
                // this.selectedData.forEach((item)=>{
                //   this.selectedRows.forEach((items)=>{
                //     this.$set(item,"selectTemplateLevel",items.levelType)
                //   })
                  console.log(this.selectedData)
                // })
                // selectedRows.forEach((item)=>{
                //   let arr={}
                //   this.selectedData.forEach((items)=>{
                //     arr=item.levelType
                //     console.log(arr)
                //     this.$set(items,"selectTemplateLevel",item.levelType)
                //   })
                // })
                console.log(selectedRows.levelType===1)
                // this.$set(this.selectedData[0],"selectTemplateLevel",this.selectTemplateLevel)
                console.log(this.selectedData)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            this.columns = this.getColumns()
            this.selectedData = selectedRows
          }
        }
      },
      getColumns() {
        let rowIndex = 1
        return [
          {
            title: '编号',
            width: 60,
            customRender: () => {
              return rowIndex++
            }
          },
          {
            title: '阶段/类别',
            dataIndex: 'name',
            width: '15%',
            customRender: (n,row) => {
              if(row.type!=='task'){
                return row.name
              }else{
                return ''
              }
            }
          },{
            title: '业务事项',
            dataIndex: 'matters',
            width: 200,
            customRender: (n,row) => {
              return row.matters||''
            }
          },
          {
            title: '管控级别',
            customRender: (record) => {
              switch (record.level) {
                case 1:
                  return '一级节点'
                case 2:
                  return '二级节点'
                case 3:
                  return '三级节点'
                default:
                  return ''
              }
            },
            width: 100
          },
          {
            title: '周期',
            dataIndex: 'duration',
            width: 60
          },
          {
            title: '计划开始日期',
            dataIndex: 'startDate',
            width: 120
          },
          {
            title: '计划完成日期',
            dataIndex: 'end_date',
            width: 120
          },
          {
            title: '完成标准',
            dataIndex: 'completeStandard',
            ellipsis: true
          },
          {
            title: '验证资料',
            dataIndex: 'verifyDoc',
            ellipsis: true
          },
          {
            title: '第一责任人',
            dataIndex: 'firstResponsible',
            ellipsis: true
          },
          {
            title: '直接责任人',
            dataIndex: 'responsible',
            ellipsis: true
          },
        ]
      },
      templateFilterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onTemplateChange(template) {
        this.selectedTemplate = template
        this.columns = this.getColumns()
      },
      onStartDateChange(startDate) {
        this.selectedStartDate = startDate
        this.columns = this.getColumns()
      },
      handleCancel() {
        this.confirmLoading = false
        this.templateVisible = false
        this.$emit('hide', false)
      },
      handleSubmit() {
          console.log(this.selectedData)
        if (!this.selectedTemplate) {
          this.$message.warn('请选择标准WBS模板')
          return
        }
        if (!this.selectedStartDate) {
          this.$message.warn('请选择项目开工日期')
          return
        }
        if (!this.selectedData || this.selectedData.length <= 0) {
          this.$message.warn('请选择需要导入的数据')
          return
        }
        this.confirmLoading = true
        this.columns = this.getColumns()
        this.$emit('hide', false)
        this.$emit("dataImport",this.selectedData)
      }
    }
  }
</script>